<template>
    <div>
        <el-table
            ref="currencyTable"
            :data="tableData"
            stripe
            border
            v-loading="loading"
            style="width: 100%"
            @selection-change="getSelectVal"
        >
            <!-- @selection-change="handleSelectionChange" -->
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column
                type="index"
                width="55"
                label="序号"
                align="center"
            />
            <el-table-column
                prop="customerId"
                label="甲方名称"
            ></el-table-column>
            <el-table-column prop="collectingAccountId" label="关联收款账户">
            </el-table-column>
            <el-table-column
                prop="contractNumber"
                label="合同编号"
            ></el-table-column>
            <el-table-column
                prop="contractName"
                label="合同名称"
            ></el-table-column>
            <el-table-column prop="deliveryType" label="交货方式" width="200">
                <template slot-scope="scope">
                    <span v-if="scope.row.deliveryType == 1"
                        >由乙方包运，运费由乙方承担</span
                    >
                    <span v-else-if="scope.row.deliveryType == 2"
                        >甲方自提货物，交货地点为乙方合肥仓库;</span
                    >
                    <span v-else-if="scope.row.deliveryType == 3"
                        >乙方代为联系物流，运费由甲方承担</span
                    >
                    <span v-else>--</span>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="合同类型">
                <template slot-scope="scope">
                    <span v-if="scope.row.type == 1">光伏材料销售合同</span>
                    <span v-else-if="scope.row.type == 2">逆变器销售合同</span>
                    <span v-else-if="scope.row.type == 3">组件销售合同</span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
            <el-table-column prop="model" label="规格型号">
                <!-- <template slot-scope="scope">
                    <span v-if="scope.row.type == 1">光伏材料销售合同</span>
                    <span v-else-if="scope.row.type == 2">逆变器销售合同</span>
                    <span v-else-if="scope.row.type == 3">组件销售合同</span>
                    <span v-else>--</span>
                </template> -->
            </el-table-column>
            <el-table-column prop="saleUnitName" label="销售单位">
                <!-- <template slot-scope="scope">
                    <span v-if="scope.row.type == 1">光伏材料销售合同</span>
                    <span v-else-if="scope.row.type == 2">逆变器销售合同</span>
                    <span v-else-if="scope.row.type == 3">组件销售合同</span>
                    <span v-else>--</span>
                </template> -->
            </el-table-column>
            <el-table-column prop="meteringUnitName" label="计价单位">
                <!-- <template slot-scope="scope">
                    <span v-if="scope.row.type == 1">光伏材料销售合同</span>
                    <span v-else-if="scope.row.type == 2">逆变器销售合同</span>
                    <span v-else-if="scope.row.type == 3">组件销售合同</span>
                    <span v-else>--</span>
                </template> -->
            </el-table-column>
            <el-table-column prop="settlementMode" label="结算类型">
                <template slot-scope="scope">
                    <span v-if="scope.row.settlementMode == 1">款到发货</span>
                    <span v-else-if="scope.row.settlementMode == 2"
                        >货到付款</span
                    >
                    <span v-else>--</span>
                </template>
            </el-table-column>
            <el-table-column prop="settlementType" label="结算方式">
                <template slot-scope="scope">
                    <span v-if="scope.row.settlementType == 1">现金</span>
                    <span v-else-if="scope.row.settlementType == 2"
                        >电汇转账</span
                    >
                    <span v-else>--</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="supplementaryClauses"
                label="补充条款"
            ></el-table-column>
            <el-table-column prop="signTime" label="签订日期">
                <template slot-scope="scope">
                    <span v-if="scope.row.signTime">{{
                        scope.row.signTime
                    }}</span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
            <el-table-column prop="remarks" label="备注">
                <template slot-scope="scope">
                    <span v-if="scope.row.remarks">{{
                        scope.row.remarks
                    }}</span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="pagination mt10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
        >
        </el-pagination>
    </div>
</template>

<script>
import { getSaleList } from "@/api/contract";
export default {
    data() {
        return {
            tableData: [],
            page: 1, //当前页
            limit: 10, //每页条数
            total: 0,
            loading: false,
        };
    },
    methods: {
        //分页器size
        handleSizeChange(val) {
            this.limit = val;
            this.getDataList();
        },
        //分页器当前页
        handleCurrentChange(val) {
            this.page = val;
            this.getDataList();
        },
        getSelectVal(val) {
            this.$emit("update:visible", false);
            this.$emit("getSelectVal", val);
        },
        getDataList() {
            this.loading = true;
            getSaleList({
                page: this.page,
                limit: this.limit,
            }).then((res) => {
                this.tableData = res.rows;
                this.total = res.total;
                this.loading = false;
            });
        },
    },
    mounted() {
        this.getDataList();
    },
};
</script>

<style></style>
